<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-08 20:37:52
-->
<template>
    <div>
        <div class="top">
            <TopNav :tabitem="info.tabitem"></TopNav>
        </div>
        <!-- 显示的内容 路由出口-->
        <div class="content w">
            <!-- 缓存路由组件 -->
            <router-view v-slot="{ Component }">
                <keep-alive>
                    <component :is="Component" />
                </keep-alive>
            </router-view>
        </div>
    </div>
</template>

<script setup>
import TopNav from '../../components/TopNav.vue';
import { ref, reactive } from 'vue'
//定义变量存储响应式数据
const info = reactive({
    //tab选项
    tabitem: [
        { path: '/recvideo/mv', name: 'MV' },
        { path: '/recvideo/video', name: '视频' },
    ]
})
</script>

<style lang="scss" scoped>
.top {
    margin: 10px 10px;
}
</style>